import React, { Component } from 'react';
import PropTypes from "prop-types";
import {
    Text,
    View,
    StyleSheet,
    TouchableHighlight,
    Image,
    Platform,
    UIManager,
    findNodeHandle,
    Dimensions
} from 'react-native';

import TextElement from '../../components/text/Text'

import Util from '../../config/util'
import Marquee from '../marquee/index';

import {getNavBarStyle} from './navBarStyle';
import Variables from '../../config/theme/styles/index';

//可点击的文本
class ClickAbleText extends Component {
    constructor(props) {
        super(props);
    }


    clickFunc = () => {

        if (this.props.clickFunc && !this.props.disabled) {
            this.props.clickFunc();
        }

    }

    renderLeftImage() {

        if (this.props.hasLeftImage) {
            return this.renderImage()
        }
    }
    renderContent() {
        let { styles,navBarStyle} = getNavBarStyle(Variables);
        if (this.props.isImage) {
          
            let rightButtonImageStyle = this.props.rightButtonImageStyle ? this.props.rightButtonImageStyle : null;
            let listenImgStyle = this.props.listenImgStyle ? this.props.listenImgStyle : null;
            return <Image
                style={[styles.clickableTextImage, rightButtonImageStyle, listenImgStyle]}
                source={this.props.title}
            />
        } else {
            if (this.props.title) {

                let color = this.props.rightButtonColor ? { color: this.props.rightButtonColor } : null
                let fontFamily = this.props.fontFamily ? { fontFamily: this.props.fontFamily } : null
                let buttonFontSize = this.props.buttonFontSize ? { fontSize: this.props.buttonFontSize } : null
                let leftButtonStyle = this.props.leftButtonStyle ? this.props.leftButtonStyle : {};

                return <TextElement text={this.props.title} customStyle={[styles.clickableTextTitle, styles['buttonText' + Util.firstUpperCase(this.props.type)], color, fontFamily, buttonFontSize, leftButtonStyle]} align={this.props.align} />
            } else {

                let color = this.props.rightButtonColor ? { color: this.props.rightButtonColor } : null
                let fontFamily = this.props.fontFamily ? { fontFamily: this.props.fontFamily } : null
                let buttonFontSize = this.props.buttonFontSize ? { fontSize: this.props.buttonFontSize } : null

                return <TextElement text={''} customStyle={[styles.clickableTextTitle, styles['buttonText' + Util.firstUpperCase(this.props.type)], color, fontFamily, buttonFontSize]} align={this.props.align} />
            }

        }
    }
    // 左侧图片
    renderImage() {
        let { styles} = getNavBarStyle(Variables);
        let clickableTextIconStyle = [styles.clickableTextIcon];
        let img;
        if (this.props.type == 'packet') {
            img = require('../../assets/navbar_btn_arrow_packet.png');
        } else if (this.props.leftButtonImage) {
            img = this.props.leftButtonImage;
        } else {
            if (this.props.headerStyle == 'small') {
                img = require('../../assets/navBar_right_new.png');
            } else {
                img = require('../../assets/navBar_right_new.png');
            }
        }
        if (this.props.headerStyle == 'small') {

            clickableTextIconStyle.push({ height: 20, width: 20, marginLeft: 12 });
        }
        return (
            <Image
                style={[clickableTextIconStyle, this.props.leftButtonImageStyle,]}
                source={img}
                accessible={true}
                accessibilityComponentType={"button"}
                accessibilityLabel={this.props.title ? '' : this.props.LeftImgText}
            />
        )
    }

    render() {
        let { styles} = getNavBarStyle(Variables);
        let containerStyle = this.props.container ? this.props.container : null;
        let activeOpacity = this.props.disabled ? 1 : 0.6;
        return (
            <TouchableHighlight
                activeOpacity={activeOpacity}
                underlayColor='transparent'
                onPress={this.clickFunc}>
                <View style={[
                    { width: 90}, containerStyle]}
                    accessible={false}
                >
                    <View style={[styles.clickableTextContainer,
                    this.props.title ? {
                        height: 45,
                        width: 90,
                    } : { width: 44, height: 45 }, containerStyle]}
                        accessibilityLabel={this.props.rightImgText}
                    >
                        {this.renderLeftImage()}
                        {this.renderContent()}
                    </View>

                </View>
            </TouchableHighlight>
        );
    }
}
ClickAbleText.propTypes = {
    title: PropTypes.any,
    hasLeftImage: PropTypes.bool,
    leftButtonImage: PropTypes.any,
    clickFunc: PropTypes.func,
    align: PropTypes.string,
    isImage: PropTypes.bool,
    type: PropTypes.oneOf(['', 'packet']),//header类型
    rightButtonImageStyle: PropTypes.any,
    leftButtonImageStyle: PropTypes.any,
    color: PropTypes.string,
    rightButtonColor: PropTypes.string,
    fontFamily: PropTypes.string,
    buttonFontSize: PropTypes.number,
    headerStyle: PropTypes.oneOf(['normal', 'small']),
    disabled: PropTypes.bool,
    leftButtonStyle: PropTypes.object
};
ClickAbleText.defaultProps = {
    hasLeftImage: true,
    align: 'left',
    isImage: false,
    type: '',
    headerStyle: 'normal',
    disabled: false
};


export default class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {
            scroll: props.titleParams.scroll
        }
    }

    listenClick = () => {
        if (typeof this.props.listenImgClickFunc == 'function') {
            this.props.listenImgClickFunc();
        }
    };

    renderListenImg() {
        let { styles,navBarStyle} = getNavBarStyle(Variables);
        let container;
        let ImageMargin;
        if(this.props.rightButtonType == 'more'){
            ImageMargin = 5;
        }else if(this.props.rightButton){
            ImageMargin = 0;
        }else{
            ImageMargin = 10;
        }
        if (this.props.headerStyle == 'small') {
            if (this.props.rightButtonType == 'text' && !this.props.rightButton) {

                container = { height: 45 };
            }
            else {
                container = { width: 44, paddingRight: 0, height: 45 };

            }
        } else {
            if (this.props.rightButtonType == 'text' && !this.props.rightButton) {
                container = { width: 90, paddingRight: 0 };
            }
            else {
                container = { width: 44 };
            }
        }
        //  客服图片
        if (this.props.listenImg) {
            let listenItem = {
                title: this.props.listenImg,
                hasLeftImage: false,
                isImage: true,
                clickFunc: this.listenClick,
                align: 'right',
                type: this.props.type,
                listenImgStyle: this.props.listenImgStyle ||  {width:navBarStyle.navBarRightIcon,height:navBarStyle.navBarRightIcon,resizeMode: 'contain',marginRight:ImageMargin},
                container: container,
                disabled: this.props.disabled,
                rightImgText: this.props.listenImgText
            };

            return <ClickAbleText {...listenItem} />
        }
    }

    renderRight() {
        let { styles,navBarStyle} = getNavBarStyle(Variables);
        let container = [];
        if (this.props.headerStyle == 'small') {
            container.push({ height: 44 });
        }
        // 右侧按钮类型 “text" | "more"
        if (this.props.rightButtonType == 'text') {
            if (!this.props.rightButton && this.props.listenImg) {
                container.push({ width: 0, paddingRight: 0 });
            } else if (this.props.rightButton && this.props.listenImg) {
                container.push({ width: 48, paddingRight: 7, });
            } else if (this.props.rightButton) {
                container.push({ paddingRight: 7, });
            }
            let clickAbleTextAttr = {
                style: styles.cellRight,
                title: this.props.rightButton,
                hasLeftImage: false,
                type: this.props.type,
                clickFunc: this.props.rightButtonFunc,
                isImage: false,
                align: 'right',
                color: this.props.color ,
                rightButtonColor: this.props.rightButtonColor ? this.props.rightButtonColor :navBarStyle.navBarRightTextColor,
                fontFamily: this.props.fontFamily,
                buttonFontSize: this.props.buttonFontSize ? this.props.buttonFontSize : navBarStyle.navBarRightTextFontSize,
                container: container,
                disabled: this.props.disabled
            };

            return <ClickAbleText  {...clickAbleTextAttr} />
        }
        else if (this.props.rightButtonType == 'more') {
            let imgStyle = [];
            let rightImg;
            if (this.props.rightButtonImage) {
                rightImg = this.props.rightButtonImage;
            } else {
                if (this.props.headerStyle == 'small') {
                    rightImg = require('../../assets/navBar_moreNew.png');
                } else {
                    rightImg = require('../../assets/navBar_more.png');
                }
            }
            if (this.props.listenImg) {
                container.push({ width: 45 });
            }
            if (this.props.headerStyle == 'small') {
                imgStyle.push({ width: 30, height: 30, resizeMode: 'contain' });
            }
            let clickAbleTextAttr = {
                title: rightImg,
                hasLeftImage: false,
                isImage: true,
                clickFunc: this.props.rightButtonFunc,
                align: 'right',
                type: this.props.type,
                rightButtonImageStyle: [imgStyle, this.props.rightButtonImageStyle || {width:navBarStyle.navBarRightIcon,height:navBarStyle.navBarRightIcon,resizeMode: 'contain',marginRight:10}],
                container: container,
                disabled: this.props.disabled,
                rightImgText: this.props.rightImgText
            };


            return <ClickAbleText {...clickAbleTextAttr} />
        }

    }

    _onLayout(event) {
        let { height } = event.nativeEvent.layout;
        if (typeof this.props.onLayout == 'function') {
            this.props.onLayout(height);
        }
    }

    renderTitle() {
        let { styles,navBarStyle} = getNavBarStyle(Variables);
       
        if (this.props.titleImage) {
            return (<Image
                style={styles.headerTitleImage}
                source={this.props.titleImage}
            />)
        } else {
            let color = this.props.color ? this.props.color : navBarStyle.navBarTitleColor;
            let fontFamily = this.props.fontFamily ? this.props.fontFamily : null;
            let titleFontSize = this.props.titleFontSize ? this.props.titleFontSize : navBarStyle.navBarTitleFontSize;

            let returnElement = null;

            let titleParams = this.props.titleParams;
            //
            if (!titleParams.conWidth) {
                titleParams.conWidth = Dimensions.get('window').width * 0.6;
            };
            //
            if (!titleParams.fontWeight) {
                titleParams.fontWeight = 'bold';
            };
            //
            if (this.props.titleParams.scroll && typeof this.props.titleParams.scroll == 'boolean') {
                titleParams.scroll = true;

                returnElement = (
                    <Marquee
                        showClose={false}
                        showLine={false}
                        text={[this.props.title]}
                        textColor={color}
                        titleFontSize={titleFontSize}
                        fontFamily={fontFamily}
                        {...titleParams}
                    />
                );
            } else {
                titleParams.scroll = false;
                let formatTitle;
                if (this.props.title.length > 7) {
                    formatTitle = this.props.title.substr(0, 7) + '...'
                } else {
                    formatTitle = this.props.title;
                }
                returnElement = (
                    <TextElement
                        text={formatTitle}
                        type="normal"
                        align="center"
                        customStyle={[styles['titleText' + Util.firstUpperCase(this.props.type)], { color: color }, { fontFamily: fontFamily }, { fontSize: titleFontSize }, { paddingRight: 0 }]}
                    />
                );
            };

            return (
                <View
                    onLayout={(e) => this._onLayout(e)}
                    style={{ flexDirection: 'row', alignSelf: 'center', justifyContent: 'center', width: titleParams.conWidth }}
                >
                    {returnElement}
                </View>
            )
        }
    }

    renderLeft() {
        let { styles,navBarStyle} = getNavBarStyle(Variables);
        let container = null;
        if (this.props.headerStyle == 'small') {
            container = { height: 44 }
        }

        let clickAbleTextAttr = {
            hasLeftImage: this.props.hasLeftImage,
            leftButtonImage: this.props.leftButtonImage,
            style: styles.cellLeft,
            title: this.props.leftButton,
            type: this.props.type,
            isImage: false,
            align: 'left',
            clickFunc: this.props.leftButtonFunc,
            color: this.props.color || navBarStyle.navBarRightTextColor,
            fontFamily: this.props.fontFamily,
            buttonFontSize: this.props.buttonFontSize || navBarStyle.navBarRightTextFontSize,
            leftButtonStyle: this.props.hasLeftImage ? [this.props.leftButtonStyle,{paddingLeft: 10}] : { paddingLeft: 15 },
            container: container,
            headerStyle: this.props.headerStyle,
            disabled: this.props.disabled,
            leftButtonImageStyle: this.props.leftButtonImageStyle,
            LeftImgText: this.props.LeftImgText
        };

        return (<ClickAbleText {...clickAbleTextAttr} />)
    }


    render() {
        let { styles,navBarStyle} = getNavBarStyle(Variables);
        let backgroundColor = this.props.backgroundColor ? { backgroundColor: this.props.backgroundColor } : null;
        let borderBottomColor = this.props.borderBottomColor ? { borderBottomColor: this.props.borderBottomColor } : null;
        let flexContainerStyle = [styles.flexContainer];
        let cellCenterStyle = [styles.cellCenter];
        if (this.props.headerStyle == 'small') {
            flexContainerStyle.push({ height: 44 });
            cellCenterStyle.push({ height: 44 });
        }

        return (

            <View style={[flexContainerStyle, styles['flexContainer' + Util.firstUpperCase(this.props.type)], backgroundColor, borderBottomColor]}>
                {this.renderLeft()}
                <View style={cellCenterStyle}>
                    {this.renderTitle()}
                </View>
                {this.renderListenImg()}
                {this.renderRight()}
            </View>

        );
    }
}

Header.propTypes = {
    leftButton: PropTypes.string,
    hasLeftImage: PropTypes.bool,
    leftButtonImage: PropTypes.any,
    leftButtonImageStyle: PropTypes.any,
    rightButton: PropTypes.string,
    title: PropTypes.string,
    leftButtonFunc: PropTypes.func,
    rightButtonFunc: PropTypes.func,
    rightButtonType: PropTypes.oneOf(['text', 'more']),//右侧按钮的类型，默认为文字(text),more则显示...，且rightButton失效
    type: PropTypes.oneOf(['', 'packet']),//header类型
    titleImage: PropTypes.any,
    rightButtonImage: PropTypes.any,
    rightButtonImageStyle: PropTypes.any,
    backgroundColor: PropTypes.string,
    borderBottomColor: PropTypes.string,
    color: PropTypes.string,
    rightButtonColor: PropTypes.string,
    fontFamily: PropTypes.string,
    buttonFontSize: PropTypes.number,
    listenImg: PropTypes.any,
    listenImgClickFunc: PropTypes.func,
    listenImgStyle: PropTypes.any,
    titleFontSize: PropTypes.number,
    headerStyle: PropTypes.oneOf(['normal', 'small']),
    onLayout: PropTypes.func,
    //是否可用
    disabled: PropTypes.bool,
    //设置标题处的属性
    titleParams: PropTypes.object,
    rightImgText: PropTypes.string,
    LeftImgText: PropTypes.string,
};

Header.defaultProps = {
    hasLeftImage: true,
    rightButtonType: 'text',
    type: '',
    headerStyle: 'normal',
    disabled: false,
    titleParams: {},
    fontFamily: Platform.OS === 'ios' ? 'PingFangSC-Regular' : 'Roboto',
    rightImgText: '更多',
    listenImgText: '我的客服',
    LeftImgText: '返回'
};

